<template>
  <div class="person">
    <el-dialog
      width="600px"
      center
      :before-close="closeDialog"
      title="添加整个部门的人员"
      :close-on-click-modal="false"
      :visible.sync="addDialogFormVisible"
    >
      <!-- style="margin-left: -80px" -->
      <div>
        <el-form :inline="true" :model="dataForm" ref="dataForm" class="elformcss">
          <!-- <el-form-item label="部门" prop="departmentGuid">
          <el-cascader
            size="mini"
            v-model="departmentGuid"
            :options="deptTree"
            ref="cascaderAddDept"
            placeholder="请选择部门"
            @change="handleChangeDept"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input v-model="dataForm.username" size="mini" clearable></el-input>
        </el-form-item>
        <el-form-item label="卡号" prop="carnumber">
          <el-input v-model="dataForm.carnumber" size="mini" clearable></el-input>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" @click="searchifo" size="mini">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :stripe="true"
          border
          :header-cell-style="headFirst"
          @selection-change="handleSelectionChange"
          :cell-style="(res) => headFirst_col(res, [])"
          height="calc(100vh - 15vh - 280px)"
        >
          <el-table-column type="selection" width="45" align="center"></el-table-column>
          <el-table-column prop="departmentName" label="部门" align="center"></el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangepage"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount"
          ></el-pagination>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addvisible()">取消</el-button>
        <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addDialogFormVisible: false,
      dataForm: {
        username: '',
        carnumber: ''
      },
      departmentGuid: [],
      deptTree: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      recordCount: 0,
      currentPage: 1,
      searchInfo: {},
      selectarr: [],
      roomGuid: ''
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  filters: {
    userSexType(val) {
      if (val == 0) {
        return '男'
      } else if (val == 1) {
        return '女'
      }
    }
  },
  mounted() {
    this.searchifo()
  },
  methods: {
    closeDialog(done) {
      this.addDialogFormVisible = false
      done()
    },
    addvisible() {
      this.departmentGuid = []
      this.tableData = []
      this.$refs['dataForm'].resetFields()
      this.pageNum = 1
      this.pageSize = 20
      this.recordCount = 0
      this.currentPage = 1
      this.addDialogFormVisible = false
    },
    addataFormSubmit() {
      if (this.selectarr.length < 1) {
        this.$message({
          message: '请选择部门',
          type: 'warning'
        })
        return
      }
      this.$refs['dataForm'].resetFields()
      this.$emit('refreshDataList', this.selectarr)
      this.addvisible()
      this.addDialogFormVisible = false
    },
    addinit(roomGuid) {
      this.roomGuid = roomGuid
      this.searchifo()
      this.addDialogFormVisible = true
    },
    handleChangeDept() {
      console.log(this.departmentGuid)
    },
    searchifo() {
      this.pageNum = 1
      this.getdepartmentinfo()
    },
    handleSelectionChange(val) {
      this.selectarr = []
      for (var i = 0; i < val.length; i++) {
        this.selectarr.push(val[i].departmentGuid)
      }
    },
    //获取部门简要信息
    getdepartmentinfo() {
      this.searchInfo = {}
      this.searchInfo.unitGuid = this.changeschoolid
      this.$http({
        url: this.$http.adornUrl('/department/query-department-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.tableData = data.messageContent.data || []
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getdepartmentinfo()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getdepartmentinfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.person {
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  /deep/.el-dialog--center .el-dialog__body {
    padding: 0 20px !important;
  }
}

.el-form-item {
  margin-bottom: 5px;
}
.page {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>